<template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
          <h3>工单信息</h3>
      </div>

      <el-descriptions class="margin-top" title="" :column="1" size="" border>
          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              车牌号码
          </template>
          {{ mqInfo.licensePlateNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              挪车原因
          </template>
          {{ mqInfo.reason }}
          </el-descriptions-item>
          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-location-outline"></i>
              车辆电话号码
          </template>
          {{ mqInfo.carNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-tickets"></i>
              处理进度
          </template>
          <el-tag type="warning" v-if="mqInfo.processingStatus == 1"> 未处理 </el-tag>
          <el-tag type="success" v-if="mqInfo.processingStatus == 2"> 已完成 </el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-location-outline"></i>
              申请时间
          </template>
          {{ mqInfo.createTime }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-location-outline"></i>
              挪车发起人联系电话
          </template>
          {{ mqInfo.sponsor }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-location-outline"></i>
              投诉图片
          </template>
          <el-image 
              v-show="urls != ''"
              style="width: 500px; height: 300px"
              v-for="url in urls"
              :key="url"
              :src="url" 
              :preview-src-list="urls"
              fit="contain">
          </el-image>
          <!-- <el-avatar shape="square" style="width: 100px;height: 100px;" :src=" ownerinfo.face!=null?ownerinfo.face:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' "></el-avatar> -->
          </el-descriptions-item>
          
      </el-descriptions>
      </el-card>
</template>

<script>
export default {
name:'moveRequestInfo',
data(){
  return{
      MQid:'',
      mqInfo:{},
      urls:[]
  }
},
mounted() {
  // 获取查询参数
  const ID = this.$route.query.ID;
  this.MQid = ID
  console.log('MQid:', ID);
  this.init()
},
activated(){
  const ID = this.$route.query.ID;
  this.MQid = ID
  console.log('MQid:', ID);
  this.init()
},
methods:{
  init(){
      this.$request.get("/move-request/moveRequestById",{
          params:{
              MQid:this.MQid
          }
      }).then(res=>{
          this.mqInfo = res.data
          let str = res.data.img
          if(str == null){
            return;
          }
          str = str.replace("[", "").replace("]", "")
          let arr = str.split(',');
          this.urls = arr
          console.log(this.urls)
      }).catch(err=>{
          console.error(err)
      })
  }
}
}
</script>

<style>

</style>